<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../public/css/bootstrap.min.css">
    <style>
        .in_block{
            display:inline-block;
        }
        .error_c{
            padding-top: 5px;
            color: #ff5100;
        }
        .error_g{
            color: #00e40b;
        }
    </style>
</head>
<body>
    <div class="center-block">
        <form class="form-horizontal col-md-6 col-md-offset-3">
            <h1 class="text-center col-sm-12">用户注册</h1>
            <div class="form-group">
                <!-- <label for="inputEmail" class="col-sm-12 text-center"><h3>Email address</h3></label> -->
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="inputEmail" placeholder="请输入用户名" maxlength="12">
                </div>
                <label class="col-sm-12 error_c"></label>
            </div>
            <div class="form-group">
                <!-- <label for="inputPassword1" class="col-sm-12 text-center"><h3>Password</h3></label> -->
                <div class="col-sm-12">
                    <input type="password" class="form-control" id="inputPassword1" placeholder="请输入密码" maxlength="20">
                </div>
                <label class="col-sm-12 error_c"></label>   
            </div>
            <div class="form-group">
                <!-- <label for="inputPassword2" class="col-sm-12 text-center"><h3>Email</h3></label> -->
                <div class="col-sm-12">
                    <input type="password" class="form-control" id="inputPassword2" placeholder="请确认密码" maxlength="20">
                </div>
                <label class="col-sm-12 error_c"></label>  
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" checked> <div class="protocol">同意<a href="#">《用户使用协议》</a>&amp;<a href="#">《隐私权条款》</a></div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-12">
                    <button type="submit" class="btn btn-primary" id="zhuce">注册</button>
                </div>
                <div class="col-lg-12 protocol text-right"><a href="http://localhost:3000/login">如果您已有账号?请登录</a></div>
            </div>
            
        </form>
    </div>
    <script src="../public/js/jquery.js"></script>
    <script src="../public/js/bootstrap.min.js"></script>
    <script>
        var uPattern = /^[a-zA-Z0-9_]{6,12}$/;
        var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z]|[a-z]).*$/;
        let userstr=['用户名长度6-12位','用户名只能输入数字、字母或者_下划线','注册需同意用户协议'];
        let str={
            'a':'请输入密码',
            'b':'密码长度6-20位',
            'c':'密码包括至少1个字母1个数字',
            'd':'两次输入密码不一致',
            'f':'该用户名已被注册'
        }
        function getStr(x){//提示字段
            return `<span class='error_c'><i class="glyphicon glyphicon-remove-circle"></i>
                ${x}
            </span>`
        }
        //通过字段
        const across=`<i class="glyphicon glyphicon-ok-circle error_g"></i>`
        function getjq(){//$元素
            var password=$('#inputPassword1').val();
            var password2=$('#inputPassword2').val();
            var $input=$('#inputPassword1').parent().next();
            var $input2=$('#inputPassword2').parent().next();
            var $input3=$('#inputEmail').parent().next()
            var user=$('#inputEmail').val();
            return [password,password2,$input,$input2,$input3,user]
        }
        //注册
        function myajax(x,y){
            $.ajax({
                url:"http://localhost:3000/register",
                type:"post",
                dataType:"json",
                data:{
                    username:x,
                    password:y,
                },
                error: function(){console.log("连接失败")},
                success: (res)=>{
                    console.log(res)
                    if(res.status=="用户名已经存在"){
                        getjq()[4].empty();
                        getjq()[4].append(getStr(str.f));
                    }else if(res.status=="ok"){
                        getjq()[4].empty();
                        getjq()[4].append(across);
                        return 'ok'
                    }else if(res.status=='数据插入成功！'){
                        console.log(res.status)
                        location.href='http://localhost:3000/login'
                    }
                }
            }) 
        }
        //检查用户名
        function adduser(){
            getjq()[4].empty()
            if(getjq()[5].length<6){
                getjq()[4].append(getStr(userstr[0]));
            }else if(uPattern.test(getjq()[5])!=true){
                getjq()[4].append(getStr(userstr[1]))
            }else{
                myajax(getjq()[5])  
            }
        }
        //检查密码
        function addpass($input,password){
            $input.empty();
            if(password.length==0){
                $input.append(getStr(str.a));
            }else if(password.length<6){
                $input.append(getStr(str.b));
            }else if(pPattern.test(password)!=true){
                $input.append(getStr(str.c));
            }else{
                $input.append(across);
                return 'ok'
            }
        }
        //检查确认密码
        function addpass2($input2,password,password2){
            $input2.empty()
            if(password2.length==0){
                $input2.append(getStr(str.a));
            }else if(password2!=password){
                $input2.append(getStr(str.d));
            }else{
                $input2.append(across);
                return 'ok'
            }
        }
        //提示用户名是否可用
        $('#inputEmail').change(function(){
            $(this).one('blur',adduser)
        })
        //提示密码是否可用
        $('#inputPassword1').change(function(){
            $(this).one('blur',()=>{
                addpass(getjq()[2],getjq()[0]);
                if(getjq()[1]!=''){
                    if(addpass2(getjq()[3],getjq()[0],getjq()[1])=='ok'){
                    addpass(getjq()[3],getjq()[1]);
                    }else{
                        addpass2(getjq()[3],getjq()[0],getjq()[1]);
                    }  
                };
            })
        })
        $('#inputPassword2').change(function(){
            $(this).one('blur',()=>{
                if(addpass2(getjq()[3],getjq()[0],getjq()[1])=='ok'){
                    addpass(getjq()[3],getjq()[1]);
                }else{
                    addpass2(getjq()[3],getjq()[0],getjq()[1]);
                }            
            })
        });
        //同意用户协议
        $('.checkbox').click(function(){
            $(this).next().remove();
        })
        //注册按钮
        $("#zhuce").click(function(){
            if($('.error_g').length!=3){
                addpass(getjq()[2],getjq()[0]);
                addpass2(getjq()[3],getjq()[0],getjq()[1]);
                adduser();
            }
            if($('input:checkbox:checked').val()!="on"){
                $('.checkbox').next().remove();
                $('.checkbox').parent().append(getStr(userstr[2]))
            }else if($('.error_g').length==3){
                console.log('正在连接')
                myajax(getjq()[5],getjq()[0])  
            }else{
                console.log($('.error_g').length)
            }
            return false;
        });
    </script>
</body>
</html>